<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello案例</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    <!-- 引入Vue.js -->
    <script src="../JavaScript/vue.js"></script>
    <script>
        // 创建一个Vue实例并且传入配置对象
        /*
         data配置项：
            类型：Object | Function
            限制：组件的定义只接受 function
            详细：
                  Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化
                  对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
                  一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。
                  实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。
                  以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。
                  当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
                  如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
        */

        /*
            el配置项：
                类型：string | Element
                限制：只在用 new 创建实例时生效
                详细：
                    提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。
                    如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译
        */

        /*
            vm.$mount( [elementOrSelector] )
                参数：
                    {Element | string} [elementOrSelector]
                    {boolean} [hydrating]
                返回值：vm - 实例自身
                用法：
                    如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
                    如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
                    这个方法返回实例自身，因而可以链式调用其它实例方法
        */

        /* const vm = new Vue({
             el: "#app", //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
             data: {
                 message: "HelloVue" // Vue 实例的数据对象(响应式的)
             }
         })
         */

        /*
        初识Vue：
            想让Vue工作就必须创建一个Vue实例并且要传入配置对象
            app容器里的代码依然符合html规范，只不过里面混入了Vue的模板语法
            app容器里的代码被称为【Vue模板】
        */
        const vm=new Vue({
            data(){
                return{
                    message:"HelloVue"
                }
            }
        })
        vm.$mount("#app")
        console.log(vm.$mount("#app"));//返回一个Vue实例
        console.log(vm);//Vue实例

    </script>
</body>

</html>
